<template>
    <Teleport to=".hearder-show">
      <van-nav-bar :title="title" :left-arrow="back">
        <template #left>
          <slot name="left"></slot>
        </template>
        <template #title>
          <slot name="title">{{ title }}</slot>
        </template>
        <template #right>
          <slot name="right"></slot>
        </template>
      </van-nav-bar>
    </Teleport>
  </template>

  <script setup lang="ts">
  import { defineProps, Teleport } from 'vue'

  interface MyTopBar {
    title: string,
    back?: boolean
  }
  // 接受父组件传递的数据
  defineProps<MyTopBar>()

  </script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
:deep(.van-nav-bar__content) {
  background-color: $globalColor;
}

.back-btn {
  font-size: 24px;
  color: black!important;
}
</style>
